<%@page contentType="text/html;charset=utf-8"%>
<%@ taglib prefix="cw" uri="/widget-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>combobox示例</title>
		<cw:base />
		<script>
        var fields=['code','name'];
        //下拉选项点击事件
        function selectFunction(combo, record, index ){
            alert(combo.getValue()+","+record.get('text')+","+index);
        }
        //更改下拉数据源
        function changeURL(){
       		 	Wonders.utils.changeComboboxStore('combo',{parentValue: 'shanghai'},'../../../../sample/form/loadCodeInfo.action');alert('更改成功！');
        }
    </script>
	</head>
	<body>
		<li>
			<b> 列表下拉框是最基本的下拉框，其功能结构和HTML的select 元素基本一致 </b>
		</li>
		<li>
			<b> 通过配置数据源来支持下拉选项列表，一般情况下，数据源的记录可以包含值（property，用于表单交互）、 名称(name，用于列表显示) </b>
		</li>
		<li>
			<b> 以下示例分别展示了不同数据源加载方式的下拉框（静态和远程数据） ，以及常用事件操作</b>
		</li>
		<br />
		<cw:form>
			<li>
				静态数据下拉框，选项数据来源通过fields和data设置，fields为数据字段名称，data为数据值，默认的fields为['value','text','id'];
				<table>
					<tr>
						<td>
							静态下拉框：
						</td>
						<td>
							<cw:combobox property="combo" data="[[1,'hello'],[2,'china']]" emptyText="请选择..." />
						</td>
					</tr>
				</table>
				<br />
			</li>
			<li>
				远程数据下拉框，选项数据来源于后台或者文件，设置url为远程加载URL，fields为自定义的数据字段
				<table>
					<tr>
						<td>
							动态下拉框：
						</td>
						<td>
							<cw:combobox property="hello" fields="fields" url="../../../../sample/form/loadCodeInfo.action" value="xuhui"
								urlParams="{parentValue: 'shanghai'}" displayField="name" valueField="code" />
						</td>
					</tr>
				</table>
				<br />
			</li>
			<li>
				可以为数据选项的第一行增加空白选项：
				<table>
					<tr>
						<td>
							下拉框：
						</td>
						<td>
							<cw:combobox property="hello" data="[[1,'hello'],[2,'china']]" emptyItem="true" emptyItemValue="0"
								emptyItemText="" value="1" />
						</td>
					</tr>
				</table>
				<br />
			</li>
			<li>
				定义下拉框的触发事件，如onselect事件：
				<table>
					<tr>
						<td>
							下拉框：
						</td>
						<td>
							<cw:combobox property="hello" data="[[1,'hello'],[2,'china']]" onSelect="selectFunction" />
						</td>
					</tr>
				</table>
				<br />
			</li>
			<li>
				更改下拉框的选项数据，重新设置url即可：
				<table>
					<tr>
						<td>
							下拉框：
						</td>
						<td>
							<cw:combobox property="hello" id="combo" />
							<cw:button text="更改下拉数据源" onclick="changeURL()"></cw:button>
						</td>
					</tr>
				</table>
				<br />
			</li>
		</cw:form>
	</body>
</html>
